ngHide
( directive in module ng
)
The ngShow
and ngHide
directives show or hide a portion of the DOM tree (HTML)
conditionally based on "truthy" values evaluated within an {expression}. In other
words, if the expression assigned to ngShow evaluates to a true value then the element is set to visible
(via display:block
in css) and if false then the element is set to hidden (so display:none).
With ngHide this is the reverse whereas true values cause the element itself to become
hidden.
Additionally, you can also provide animations via the ngAnimate attribute to animate the show and hide effects.
<ANY ng-hide="{expression}"> ... </ANY>as class
<ANY class="ng-hide: {expression};"> ... </ANY>
ngHide – {expression} –
If the expression is truthy then the element is shown or hidden respectively.
.example-show-setup { line-height:0; opacity:0; padding:0 10px; } .example-show-start.example-show-start { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; }
.example-hide-setup { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .example-hide-start.example-hide-start { line-height:0; opacity:0; padding:0 10px; }
.check-element {
padding:10px;
border:1px solid black;
background:white;
}
input('checked').check();
expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1);
expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1);
});